<!--
 * @Descripttion: 银行余额
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-12-28 11:19:48
 * @LastEditors: younghxp
 * @LastEditTime: 2021-12-20 15:15:22
-->
<template>
  <div class="unRealName">
    <div class="unRealNameSearch">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="开户银行">
              <el-select
                placeholder="请选择"
                clearable
                v-model="filterField.bankName"
              >
                <el-option
                  v-for="item in bankOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="专户账号">
              <el-input
                v-model="filterField.accountCode"
                placeholder="请输入内容"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目名称">
                <el-input
                  v-model="filterField.projectName"
                  placeholder="请输入内容"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="创建日期">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                  :startTime="startTimeValue"
                  :endTime="endTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="更新日期">
                <timeSelection
                  @getStartTimeValue="getStartTimeValueTwo"
                  @getEndTimeValue="getEndTimeValueTwo"
                  :startTime="startTimeValueTwo"
                  :endTime="endTimeValueTwo"
                ></timeSelection>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
          <!-- <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              class="commonBtn"
              v-sdc
              @click="searchList"
            ></el-button>
          </el-form-item> -->
        </el-form>
      </el-row>
    </div>
    <div class="unRealNameMain">
      <!-- <div class="header"> -->
      <!-- <div class="headerBox"> -->
      <div class="colSetupBottom">
        <colSetup
          :tableColList="colSetupTableCol"
          @getSelectMenuId="getSelectMenuIds"
        />
        <el-button
          type="primary"
          class="funComBut saveBtn"
          icon="icon iconfont icondaochu"
          @click="toExportExcel"
        >
          导出报表
        </el-button>
      </div>

      <!-- </div> -->
      <!-- </div> -->
      <!-- 表格 -->
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        :max-height="tableHeight"
        @sort-change="sortChange"
      >
        <my-column
          v-for="(item, index) in headerList"
          :key="index"
          :col="item"
          :sortable="
            ['createDate', 'updateDate', 'balance'].includes(item.prop)
              ? 'custom'
              : false
          "
        ></my-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关数据"></emptyTable>
        </div>
      </el-table>
      <!-- 分页 -->
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
  </div>
</template>
<script>
import exportExcel from '@/components/publicCom/exportExcel'
import common from '../../kits/common'
import MyColumn from './MyColumn'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'bankBalance',
  components: {
    exportExcel,
    MyColumn,
  },
  data() {
    return {
      tableHeight: null,
      advanced: false,
      date: [],
      showExcel: false,
      isShow: false,
      activeNames: this.activeName,
      StartTimeValue: '',
      EndTimeValue: '',
      paramsList: [],
      bankOptions: [],
      areaId: '', //区域
      tableList: [],
      tableCol: [
        {
          isShow: false,
          label: '银行余额',
          prop: 'all',
          children: [
            {
              id: 1,
              prop: 'projectName',
              isShow: true,
              label: '项目名称',
              disabled: true,
            },
            {
              id: 2,
              prop: 'bankNameDesc',
              isShow: true,
              label: '开户银行',
              disabled: true,
            },
            {
              id: 3,
              prop: 'accountName',
              isShow: true,
              label: '账户名称',
              disabled: true,
            },
            {
              id: 4,
              prop: 'accountCode',
              isShow: true,
              label: '专户账号',
            },
            {
              id: 5,
              prop: 'contact',
              isShow: true,
              label: '联系人',
            },
            {
              id: 6,
              prop: 'tel',
              isShow: true,
              label: '联系手机号',
            },
            {
              id: 7,
              prop: 'createDate',
              isShow: true,
              label: '创建时间',
            },
            {
              id: 8,
              prop: 'statusDesc',
              isShow: true,
              label: '签约状态',
            },
            {
              id: 9,
              prop: 'updateDate',
              isShow: true,
              label: '最后更新时间',
            },
            {
              id: 10,
              prop: 'balance',
              isShow: true,
              label: '账号余额(元)',
            },
          ],
        },
      ],
      requestUrl: 'api-s/cs/bankstats/base/balancelist',
      easyModel: true,
      filterField: {
        bankName: '',
        accountCode: '',
        projectName: '',
        createDateStart: '',
        createDateEnd: '',
        updateDateStart: '',
        updateDateEnd: '',
      },
      loading: false,
      startDate: '',
      colSetupTableCol: [],
      headerList: [],
      isShowDialog: false,
      isShowExcel: false,
      headType: '',
      selectProps: [],
    }
  },
  created() {
    this.getBank()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
      this.headerList = this.tableCol[0].children
      this.getSelectProps(this.headerList)
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getSelectProps(tableCol) {
      let propArr = []
      tableCol.forEach((v) => {
        if (v.isShow) {
          propArr.push(v.prop)
        }
      })
      this.selectProps = JSON.parse(JSON.stringify(propArr))
      this.colSetupTableCol = JSON.parse(JSON.stringify(this.tableCol))
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
    },
    getBank() {
      var data = {
        type: 'BANK_TYPE',
      }
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: data,
      })
        .then((response) => {
          this.bankOptions = response.data.result
        })
        .catch((error) => {
          console.log(error)
        })
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.createDateStart = val
        this.startTimeValue = val
      } else {
        this.filterField.createDateStart = ''
        this.startTimeValue = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.createDateEnd = val
        this.endTimeValue = val
      } else {
        this.filterField.createDateEnd = ''
        this.endTimeValue = ''
      }
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValueTwo(val) {
      if (val) {
        this.filterField.updateDateStart = val
        this.startTimeValueTwo = val
      } else {
        this.filterField.updateDateStart = ''
        this.startTimeValueTwo = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValueTwo(val) {
      if (val) {
        this.filterField.updateDateEnd = val
        this.endTimeValueTwo = val
      } else {
        this.filterField.updateDateEnd = ''
        this.endTimeValueTwo = ''
      }
    },
    getSelectMenuIds(val) {
      this.headerList = val[0].children
    },
    toExportExcel() {
      if (this.tableList.length == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning',
        })
      } else {
        const vm = this
        let arrval = []
        this.headerList.forEach((v) => {
          if (v.isShow) {
            arrval.push(v.prop)
          }
        })
        window.location.href =
          common.commonApi +
          'api-s/cs/bankstats/base/export?listType=' +
          'BALANCE' +
          '&bankName=' +
          this.filterField.bankName +
          '&accountCode=' +
          this.filterField.accountCode +
          '&projectName=' +
          encodeURIComponent(this.filterField.projectName) +
          '&createDateStart=' +
          this.filterField.createDateStart +
          '&createDateEnd=' +
          this.filterField.createDateEnd +
          '&updateDateStart=' +
          this.filterField.updateDateStart +
          '&field=' +
          arrval +
          '&sort=' +
          this.filterField.sort +
          '&sortField=' +
          this.filterField.sortField +
          '&access_token=' +
          localStorage.getItem('access_token') +
          '&updateDateEnd=' +
          this.filterField.updateDateEnd
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
  },
  mounted() {
    this.loading = true
    this.tableHeight = window.innerHeight - 300
    // 监听窗口大小变化
    let self = this
    window.onresize = function () {
      self.tableHeight = window.innerHeight - 300
    }
  },
}
</script>
<style lang="less" scoped>
.unRealNameSearch {
  border-bottom: 10px solid #f5f7fa;
}
.baseSearch {
  position: relative;
  padding-left: 102px;
  &Title {
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    line-height: 36px;
    width: 96px;
    text-align: right;
    display: inline-block;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #333333;
  }
  &Item {
    margin-left: 17px;
    margin-bottom: 24px;
  }
}
.moreSearch {
  position: relative;
  padding-left: 119px;
  &Title {
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    line-height: 36px;
    width: 96px;
    text-align: right;
    display: inline-block;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #333333;
  }
  &List {
    margin-bottom: 24px;
    &Left {
      display: inline-block;
    }
    &Right {
      display: inline-block;
      margin-left: 17px;
      width: 230px;
      .el-input {
        width: 100%;
      }
    }
  }
}
.actionBox {
  position: relative;
  padding-left: 119px;
  margin-bottom: 24px;
  &Add {
    line-height: 34px;
    border-radius: 18px;
    width: 76px;
    border-color: #009588;
    color: #009588;
    padding: 0;
  }
  &Search {
    position: absolute;
    top: 0;
    right: 17px;
  }
}
.unRealNameMain {
  padding: 24px;
  .colSetupBottom {
    margin-bottom: 24px;
    float: left;
    .colSetupBtn {
      float: left;
      margin-right: 12px;
    }
    /deep/ button.el-button.commonBut.saveBtn.funComBut.el-button--default {
      float: right;
    }
  }
  .header {
    padding-bottom: 24px;
    min-height: 60px;
    text-align: left;
    line-height: 36px;
    position: relative;
    &Tips {
      display: block;
      width: calc(100% - 240px);
      font-size: 14px;
      color: #333333;
    }
    &Box {
      position: absolute;
      right: 0;
      top: 0;
      height: 36px;
    }
    .el-button {
      line-height: 36px;
      height: 36px;
      // vertical-align: middle;
      img {
        vertical-align: sub;
      }
    }
  }
}
@import '../../../static/css/filterArea.less';
</style>
